<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属仓库">
          <j-select-warehouse-modal
            v-decorator="['warehouseId', validatorRules.warehouseId]"
            :disabled="!!warehouseId"
            placeholder="请选择所属仓库"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="库位编号">
          <a-input placeholder="请输入库位编号" v-decorator="['locationCode', validatorRules.locationCode]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="库位名称">
          <a-input placeholder="请输入库位名称" v-decorator="['locationName', validatorRules.locationName]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="库位二维码">
          <div v-if="model.locationQrcode">
            <img :src="getImgView(model.locationQrcode)" style="max-width: 100px; max-height: 100px" />
            <div style="margin-top: 5px">
              <a-checkbox v-decorator="['forceUpdateQrcode']">强制更新二维码</a-checkbox>
              <span style="color: #999; margin-left: 5px; font-size: 12px">勾选后保存将重新生成二维码</span>
            </div>
          </div>
          <div v-else style="color: #999">保存后将自动生成二维码</div>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
          <j-dict-select-tag
            type="list"
            v-decorator="['status', validatorRules.status]"
            dictCode="wms_location_status"
            placeholder="请选择状态"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
          <a-textarea placeholder="请输入备注" v-decorator="['remark']" :rows="4" />
        </a-form-item>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { getFileAccessHttpUrl } from '@/api/manage'
import JSelectWarehouseModal from '@/components/jeecgbiz/JSelectWarehouseModal.vue'

export default {
  name: 'WarehouseLocationModal',
  components: {
    JDictSelectTag,
    JSelectWarehouseModal,
  },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      warehouseId: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        warehouseId: {
          rules: [{ required: true, message: '请选择所属仓库!' }],
        },
        locationCode: {
          rules: [{ required: true, message: '请输入库位编号!' }],
        },
        locationName: {
          rules: [{ required: true, message: '请输入库位名称!' }],
        },
        status: {
          rules: [{ required: true, message: '请选择状态!' }],
        },
      },
      url: {
        add: '/wms/location/add',
        edit: '/wms/location/edit',
      },
    }
  },
  methods: {
    // 获取图片访问路径
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },

    add(warehouseId) {
      this.warehouseId = warehouseId
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.warehouseId = record.warehouseId || this.warehouseId
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.model, 'warehouseId', 'locationCode', 'locationName', 'status', 'remark', 'forceUpdateQrcode')
        )
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpUrl = ''
          let method = ''
          if (!this.model.id) {
            httpUrl = this.url.add
            method = 'post'
            values.warehouseId = this.warehouseId
          } else {
            httpUrl = this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          httpAction(httpUrl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script> 